<template>
  <div class="home-container">
    <div class="list">
      <ul class="list-group">
        <li v-for="(item, index) in listData"
            :key="index"
            class="list-group-item">
          <span>{{item.title}}</span>
          <i class="fa fa-close" @click="del(item.id)"></i>
        </li>
      </ul>
      <div class="input-group mb-3 form-todo">
        <input type="text" class="form-control" placeholder="Please enter todo">
        <div class="input-group-append">
          <button class="btn btn-outline-secondary" type="button" id="create-todo">创建</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Home',
  data() {
    return {
      listData: []
    }
  },
  async created() {
    try {
      const res = await axios({
        method: 'GET',
        url: 'http://localhost:3000/todo'
      })
      this.listData = res.data
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    del(id) {
      console.log(id)
    }
  }
}
</script>

<style lang="scss" scoped>
.home-container {
  width: 300px;
  margin-top: 20px;
}

.list .list-group-item {
  border: 1px solid;
  height: 50px;
  padding: 0 10px;
  border-color: #0c8ed9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.list .list-group-item i {
  cursor: pointer;
  transition: .3s;
}

.list .list-group-item i:hover {
  transform: rotate(90deg) scale(1.2);
}

.form-todo {
  margin: 20px 0;
}
</style>